<!--
 * @Author: jqm123 2289662078@qq.com
 * @Date: 2025-08-13 08:43:46
 * @LastEditors: jqm123 2289662078@qq.com
 * @LastEditTime: 2025-08-13 11:15:00
 * @FilePath: /bmxt/src/views/enroll/enroll_szct.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import api from "@/api/api";
import vw from "@/utils/inline-px-to-vw";
import {
  closeToast,
  showConfirmDialog,
  showLoadingToast,
  showToast,
} from "vant";
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";

const form = ref({
  option1: "",
  option2: "",
  option3: "男生",
  option4: "",
});
const route = useRoute();
const hasSubmit = ref(false);
const hasPay = ref(false);
const hasRefund = ref(false);
const price = ref("");
const loading = ref(true);
const id = ref(-1);
const showPicker = ref(false);
const dataValue = ref([]);
const calendar = new URL("@/assets/icons/szct_icon.png", import.meta.url).href;
const m = new URL("@/assets/icons/men.png", import.meta.url).href;
const w = new URL("@/assets/icons/nv.png", import.meta.url).href;
const minDate = new Date(2000, 0, 1);
const maxDate = new Date();

const onSubmit = async () => {
  if (!hasSubmit.value) {
    showLoadingToast({
      duration: 0,
      message: "提交中...",
    });
    await api.szct_submit(form.value).finally(() => {
      closeToast();
    });
    showToast("提交成功");
  }
  if (!hasPay.value) {
    showConfirmDialog({
      title: "缴费提示",
      message: `报名活动需缴费¥${price.value},是否继续?`,
    })
      .then(() => {
        pay();
      })
      .catch(() => { });
  }
};

const pay = async () => {
  let res = await api.postPay({
    id: id.value,
  });
  window.location.href = res.url;
};

const onConfirm = ({ selectedValues }) => {
  form.value.option2 = `${selectedValues[0]}-${selectedValues[1]}-${selectedValues[2]}`;
  showPicker.value = false;
};

const choice = (string) => {
  if (hasSubmit.value) return;
  form.value.option3 = string;
};

onMounted(async () => {
  id.value = route.query.id;
  showLoadingToast({
    duration: 0,
    forbidClick: true,
    message: "加载中...",
  });
  let res = await api.getEnrollInfo({ id: id.value }).finally(() => {
    closeToast();
    loading.value = false;
  });
  hasPay.value = res.payStatus == 1;
  hasRefund.value = res.payStatus == 2;
  price.value = res.price;
  hasSubmit.value = res.isReg === 1;
  if (hasSubmit.value) {
    form.value.option1 = res.option1;
    form.value.option2 = res.option2;
    form.value.option3 = res.option3;
    form.value.option4 = res.option4;
    dataValue.value = res.option2.split("-");
  }
});
</script>

<template>
  <div class="home" :style="{ paddingTop: vw(280) }">
    <div class="title">填写报名信息</div>
    <div class="form">
      <van-form @submit="onSubmit" label-align="top" colon>
        <van-cell-group inset :border="false">
          <van-field v-model="form.option1" name="option1" label="孩子姓名" autocomplete="off" :disabled="hasSubmit" center
            :border="false" :rules="[{ required: true, message: '请填写' }]" />
          <van-field v-model="form.option2" name="option2" label="孩子生日" readonly :right-icon="calendar"
            :disabled="hasSubmit" :border="false" @click="showPicker = true"
            :rules="[{ required: true, message: '请选择' }]" />
          <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
            <van-date-picker v-model="dataValue" :min-date="minDate" :max-date="maxDate" :disabled="hasSubmit"
              @confirm="onConfirm" @cancel="showPicker = false" />
          </van-popup>
          <van-field v-model="form.option3" name="option3" label="孩子性别" :disabled="hasSubmit" readonly :border="false"
            class="spec" :rules="[{ required: true, message: '请选择' }]">
            <template #input>
              <div class="container">
                <div class="item" :class="{ active: form.option3 == '男生' }" @click="choice('男生')">
                  <img :src="m" alt="" />
                  <span class="men">男生</span>
                </div>
                <div class="item" :class="{ active: form.option3 == '女生' }" @click="choice('女生')">
                  <img :src="w" alt="" />
                  <span class="women">女生</span>
                </div>
              </div>
            </template>
          </van-field>
          <van-field v-model="form.option4" name="option4" label="家长联系方式" type="tel" :disabled="hasSubmit"
            autocomplete="off" center :border="false" :rules="[{ required: true, message: '请填写' }]" />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" :disabled="hasPay || hasRefund" native-type="submit" color="#172f68">
            {{
              hasSubmit
              ? hasPay
                ? `已报名并缴费`
                : hasRefund
                  ? "已退款"
                  : `已报名请缴费¥${price}`
              : `提交资料(¥${price})`
            }}
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<style lang="less" scoped>
/* 样式 */
.home {
  min-height: 100vh;
  background-image: url("https://zxcxappimg.cxbtv.cn/regsys/2025/08/13/5971b862aae139485c160dc49a65d7b7.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  background-attachment: scroll;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 15px;

  .title {
    font-size: 22px;
    color: #22315f;
    text-align: center;
    font-weight: bold;
  }

  .form {
    margin-top: 30px;

    .container {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px 0;
      width: 100%;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 1px solid #8f93ad;
        border-radius: 10px;
        padding: 10px 20px;
        margin: 0 25px;

        img {
          width: 25px;
          height: 23px;
        }

        .men {
          font-size: 12px;
          color: #076bff;
        }

        .women {
          font-size: 12px;
          color: #eb1de1;
        }
      }

      .active {
        border-color: #212b56;

        .men,
        .women {
          font-size: 14px;
        }
      }
    }
  }

  --van-cell-background: transparent;
  --van-cell-group-background: transparent;
  --van-cell-horizontal-padding: 0;
  --van-field-label-color: #202f5f;
  --van-cell-font-size: 16px;

  :deep(.van-field__body) {
    padding: 8px 15px;
    border: 1px solid #202f5f;
    border-radius: 999px;
  }

  .spec :deep(.van-field__body) {
    padding: unset;
    background-color: unset;
    border: unset;
    border-radius: unset;
  }
}
</style>
